<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>消息中心 - 快答答题</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa, #e6f0ff);
            color: #333;
            line-height: 1.6;
            min-height: 100vh;
            overflow-x: hidden;
        }
        
        /* 统一标题栏样式 */
        #header {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            padding: 12px 16px;
            position: sticky;
            top: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .header_con {
            display: flex;
            align-items: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }
        
        .back {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: white;
            font-size: 16px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            position: absolute;
            left: 0;
        }
        
        .back:hover {
            transform: translateX(-5px);
        }
        
        .back span {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"/></svg>') no-repeat center;
            background-size: contain;
        }
        
        .top_tit {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
        
        .header-actions {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            gap: 10px;
        }
        
        .header-action {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .header-action:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        /* 主内容区域 */
        .message-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 0 15px;
            position: relative;
        }
        
        /* 消息筛选 */
        .filter-tabs {
            display: flex;
            background: white;
            border-radius: 30px;
            padding: 5px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
        }
        
        .filter-tab {
            flex: 1;
            padding: 12px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            border-radius: 30px;
            transition: all 0.3s ease;
        }
        
        .filter-tab.active {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            box-shadow: 0 3px 10px rgba(37, 117, 252, 0.3);
        }
        
        /* 消息卡片 */
        .message-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 15px;
            overflow: hidden;
            position: relative;
            transition: all 0.3s ease;
            border-left: 4px solid #2575fc;
            cursor: pointer;
        }
        
        .message-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }
        
        .message-card.unread {
            border-left: 4px solid #ff3b30;
        }
        
        .message-card.unread::after {
            content: "";
            position: absolute;
            top: 15px;
            right: 15px;
            width: 10px;
            height: 10px;
            background: #ff3b30;
            border-radius: 50%;
        }
        
        .message-card.system {
            border-left: 4px solid #2575fc;
        }
        
        .message-card.reply {
            border-left: 4px solid #34c759;
        }
        
        .message-card.prize {
            border-left: 4px solid #ff9500;
        }
        
        .message-card.points-up {
            border-left: 4px solid #34c759;
        }
        
        .message-card.points-down {
            border-left: 4px solid #ff3b30;
        }
        
        .message-header {
            padding: 15px 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .message-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            color: white;
            flex-shrink: 0;
        }
        
        .message-icon.system {
            background: linear-gradient(135deg, #2575fc, #6a11cb);
        }
        
        .message-icon.reply {
            background: linear-gradient(135deg, #34c759, #2dbb5f);
        }
        
        .message-icon.prize {
            background: linear-gradient(135deg, #ff9500, #ff7700);
        }
        
        .message-icon.points-up {
            background: linear-gradient(135deg, #34c759, #2dbb5f);
        }
        
        .message-icon.points-down {
            background: linear-gradient(135deg, #ff3b30, #ff2a1f);
        }
        
        .message-title {
            font-size: 16px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 3px;
        }
        
        .message-time {
            font-size: 13px;
            color: #7f8c8d;
        }
        
        .message-content {
            padding: 15px 20px;
            font-size: 14px;
            color: #555;
            line-height: 1.6;
        }
        
        .message-footer {
            padding: 10px 20px;
            background: #f8fbff;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .message-status {
            font-size: 13px;
            color: #7f8c8d;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .message-status.unread {
            color: #ff3b30;
            font-weight: 600;
        }
        
        .message-actions {
            display: flex;
            gap: 10px;
        }
        
        .message-action {
            padding: 6px 15px;
            background: #f0f5ff;
            border: none;
            border-radius: 30px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            z-index: 2;
        }
        
        .message-action:hover {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
        }
        
        /* 详情页样式 */
        .detail-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: 200;
            padding: 20px;
            overflow-y: auto;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
        }
        
        .detail-container.active {
            transform: translateY(0);
        }
        
        .detail-header {
            display: flex;
            align-items: center;
            padding: 15px 0;
            margin-bottom: 20px;
            border-bottom: 1px solid #f0f5ff;
        }
        
        .detail-back {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f0f5ff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2575fc;
            font-size: 18px;
            margin-right: 15px;
            cursor: pointer;
        }
        
        .detail-title {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
        }
        
        .detail-content {
            padding: 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-bottom: 20px;
        }
        
        .detail-type {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .detail-type.system {
            background: rgba(37, 117, 252, 0.1);
            color: #2575fc;
        }
        
        .detail-type.reply {
            background: rgba(52, 199, 89, 0.1);
            color: #34c759;
        }
        
        .detail-type.prize {
            background: rgba(255, 149, 0, 0.1);
            color: #ff9500;
        }
        
        .detail-type.points {
            background: rgba(52, 199, 89, 0.1);
            color: #34c759;
        }
        
        .detail-time {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 20px;
        }
        
        .detail-body {
            font-size: 16px;
            color: #333;
            line-height: 1.8;
        }
        
        .detail-actions {
            display: flex;
            gap: 15px;
            padding: 20px 0;
        }
        
        .detail-action {
            flex: 1;
            padding: 15px;
            text-align: center;
            border-radius: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .detail-action.primary {
            background: linear-gradient(90deg, #2575fc, #6a11cb);
            color: white;
            box-shadow: 0 5px 15px rgba(37, 117, 252, 0.3);
        }
        
        .detail-action.primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(37, 117, 252, 0.4);
        }
        
        .detail-action.secondary {
            background: #f0f5ff;
            color: #2575fc;
        }
        
        .detail-action.secondary:hover {
            background: #e6edff;
        }
        
        /* 地址表单 */
        .address-form {
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .form-input {
            width: 100%;
            padding: 14px;
            border: 1px solid #e0e6ff;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        .form-input:focus {
            border-color: #2575fc;
            outline: none;
            box-shadow: 0 0 0 3px rgba(37, 117, 252, 0.2);
        }
        
        /* 空状态 */
        .empty-messages {
            text-align: center;
            padding: 40px 20px;
            background: white;
            border-radius: 16px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            margin-top: 20px;
        }
        
        .empty-messages i {
            font-size: 60px;
            color: #e0e6ff;
            margin-bottom: 20px;
        }
        
        .empty-messages h3 {
            font-size: 18px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .empty-messages p {
            font-size: 14px;
            color: #7f8c8d;
            max-width: 300px;
            margin: 0 auto;
        }
        
        /* 加载动画 */
        .loading {
            text-align: center;
            padding: 20px;
        }
        
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f0f5ff;
            border-top: 4px solid #2575fc;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 15px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 响应式设计 */
        @media (max-width: 480px) {
            .filter-tabs {
                flex-wrap: wrap;
            }
            
            .filter-tab {
                flex: 1 0 33%;
                padding: 10px;
                font-size: 13px;
            }
            
            .message-actions {
                flex-direction: column;
                gap: 5px;
            }
            
            .message-action {
                width: 100%;
            }
            
            .detail-actions {
                flex-direction: column;
            }
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.4s ease-out;
        }
        
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s, top 0.3s;
            font-size: 14px;
            pointer-events: none;
        }
        
        .notification.show {
            top: 30px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <!-- 标题栏 -->
    <header id="header">
        <div class="header_con">
            <a href="javascript:history.go(-1);" class="back">
                <span></span>
            </a> 
            <div class="top_tit">消息中心</div>
            <div class="header-actions">
                <div class="header-action">
                    <i class="fas fa-search"></i>
                </div>
                <div class="header-action">
                    <i class="fas fa-ellipsis-v"></i>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <div class="message-container">
        <!-- 消息筛选 -->
        <div class="filter-tabs">
            <div class="filter-tab active" data-filter="all">全部消息</div>
            <div class="filter-tab" data-filter="unread">未读消息</div>
            <div class="filter-tab" data-filter="system">系统通知</div>
            <div class="filter-tab" data-filter="reply">回复消息</div>
            <div class="filter-tab" data-filter="points">积分变动</div>
        </div>
        
        <!-- 消息列表 -->
        <div class="message-list">
            <!-- 系统消息 -->
            <div class="message-card system unread" data-id="1" data-type="system">
                <div class="message-header">
                    <div class="message-icon system">
                        <i class="fas fa-bell"></i>
                    </div>
                    <div>
                        <div class="message-title">系统通知</div>
                        <div class="message-time">2023年10月15日 09:30</div>
                    </div>
                </div>
                <div class="message-content">
                    亲爱的用户，系统将于2023年10月20日进行维护升级，升级时间为凌晨2:00-5:00。在此期间，您将无法使用答题服务，请提前做好安排。
                </div>
                <div class="message-footer">
                    <div class="message-status unread">
                        <i class="fas fa-circle"></i>
                        未读
                    </div>
                    <div class="message-actions">
                        <button class="message-action action-mark-read">标记已读</button>
                        <button class="message-action action-view">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 获奖消息 -->
            <div class="message-card prize" data-id="2" data-type="prize">
                <div class="message-header">
                    <div class="message-icon prize">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div>
                        <div class="message-title">恭喜您获奖了！</div>
                        <div class="message-time">2023年10月12日 16:45</div>
                    </div>
                </div>
                <div class="message-content">
                    热烈祝贺您在9月答题排行榜中获得第3名！您已获得Apple Watch Series 8一部。请于7天内填写收货地址，逾期视为自动放弃奖品。
                </div>
                <div class="message-footer">
                    <div class="message-status">
                        <i class="fas fa-check-circle"></i>
                        已读
                    </div>
                    <div class="message-actions">
                        <button class="message-action action-view">查看详情</button>
                        <button class="message-action action-address">填写地址</button>
                    </div>
                </div>
            </div>
            
            <!-- 回复消息 -->
            <div class="message-card reply" data-id="3" data-type="reply">
                <div class="message-header">
                    <div class="message-icon reply">
                        <i class="fas fa-comment-dots"></i>
                    </div>
                    <div>
                        <div class="message-title">您的问题有回复了</div>
                        <div class="message-time">2023年10月10日 11:20</div>
                    </div>
                </div>
                <div class="message-content">
                    您提出的"量子力学基础概念"问题，专家"物理教授张伟"已作出详细解答："量子力学是描述微观粒子行为的物理学理论...（点击查看完整回复）"
                </div>
                <div class="message-footer">
                    <div class="message-status">
                        <i class="fas fa-check-circle"></i>
                        已读
                    </div>
                    <div class="message-actions">
                        <button class="message-action action-view">查看回复</button>
                    </div>
                </div>
            </div>
            
            <!-- 积分增加 -->
            <div class="message-card points-up" data-id="4" data-type="points">
                <div class="message-header">
                    <div class="message-icon points-up">
                        <i class="fas fa-arrow-up"></i>
                    </div>
                    <div>
                        <div class="message-title">积分增加通知</div>
                        <div class="message-time">2023年10月8日 18:30</div>
                    </div>
                </div>
                <div class="message-content">
                    恭喜您！完成今日挑战任务，获得积分奖励：+250分。当前总积分：8,650分。再接再厉，继续向排行榜前列冲刺！
                </div>
                <div class="message-footer">
                    <div class="message-status">
                        <i class="fas fa-check-circle"></i>
                        已读
                    </div>
                    <div class="message-actions">
                        <button class="message-action action-view">查看积分</button>
                    </div>
                </div>
            </div>
            
            <!-- 积分减少 -->
            <div class="message-card points-down" data-id="5" data-type="points">
                <div class="message-header">
                    <div class="message-icon points-down">
                        <i class="fas fa-arrow-down"></i>
                    </div>
                    <div>
                        <div class="message-title">积分变动通知</div>
                        <div class="message-time">2023年10月5日 14:15</div>
                    </div>
                </div>
                <div class="message-content">
                    您兑换了"30天VIP会员"，扣除积分：-500分。当前总积分：8,400分。VIP特权已激活，有效期至2023年11月5日。
                </div>
                <div class="message-footer">
                    <div class="message-status">
                        <i class="fas fa-check-circle"></i>
                        已读
                    </div>
                    <div class="message-actions">
                        <button class="message-action action-view">查看特权</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <div class="loading">
            <div class="loading-spinner"></div>
            <div>加载更多消息...</div>
        </div>
        
        <!-- 空状态 -->
        <div class="empty-messages" style="display: none;">
            <i class="fas fa-envelope-open"></i>
            <h3>暂无消息</h3>
            <p>您当前没有符合条件的消息</p>
        </div>
    </div>
    
    <!-- 消息详情页 -->
    <div class="detail-container" id="detailContainer">
        <!-- 详情内容将由JS动态生成 -->
    </div>
    
    <!-- 通知 -->
    <div class="notification" id="notification"></div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const notification = document.getElementById('notification');
            
            // 显示通知
            function showNotification(message, duration = 2000) {
                notification.textContent = message;
                notification.classList.add('show');
                
                setTimeout(() => {
                    notification.classList.remove('show');
                }, duration);
            }
            
            // 筛选标签交互
            const filterTabs = document.querySelectorAll('.filter-tab');
            const messageCards = document.querySelectorAll('.message-card');
            
            filterTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const filterType = this.getAttribute('data-filter');
                    
                    // 更新激活状态
                    filterTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 过滤消息
                    messageCards.forEach(card => {
                        const cardType = card.getAttribute('data-type');
                        const isUnread = card.classList.contains('unread');
                        
                        if (filterType === 'all') {
                            card.style.display = 'block';
                        } else if (filterType === 'unread') {
                            card.style.display = isUnread ? 'block' : 'none';
                        } else if (filterType === 'system' && cardType === 'system') {
                            card.style.display = 'block';
                        } else if (filterType === 'reply' && cardType === 'reply') {
                            card.style.display = 'block';
                        } else if (filterType === 'points' && cardType === 'points') {
                            card.style.display = 'block';
                        } else {
                            card.style.display = 'none';
                        }
                    });
                    
                    // 检查空状态
                    checkEmptyState();
                });
            });
            
            // 检查是否为空状态
            function checkEmptyState() {
                const visibleCards = document.querySelectorAll('.message-card[style="display: block;"]');
                const emptyState = document.querySelector('.empty-messages');
                const messageList = document.querySelector('.message-list');
                const loading = document.querySelector('.loading');
                
                if (visibleCards.length === 0) {
                    emptyState.style.display = 'block';
                    messageList.style.display = 'none';
                    loading.style.display = 'none';
                } else {
                    emptyState.style.display = 'none';
                    messageList.style.display = 'block';
                    loading.style.display = 'block';
                }
            }
            
            // 标记消息为已读
            function markMessageAsRead(card) {
                if (card.classList.contains('unread')) {
                    card.classList.remove('unread');
                    const status = card.querySelector('.message-status');
                    status.classList.remove('unread');
                    status.innerHTML = '<i class="fas fa-check-circle"></i> 已读';
                    
                    // 移除未读红点
                    card.querySelector('.message-card.unread::after')?.remove();
                    
                    // 移除标记已读按钮
                    const markReadBtn = card.querySelector('.action-mark-read');
                    if (markReadBtn) {
                        markReadBtn.remove();
                    }
                    
                    showNotification('消息已标记为已读');
                }
            }
            
            // 显示消息详情
            function showMessageDetail(card) {
                const detailContainer = document.getElementById('detailContainer');
                const type = card.getAttribute('data-type');
                const title = card.querySelector('.message-title').textContent;
                const time = card.querySelector('.message-time').textContent;
                const content = card.querySelector('.message-content').textContent;
                
                // 生成详情页内容
                let detailHTML = `
                    <div class="detail-header">
                        <div class="detail-back" id="detailBack">
                            <i class="fas fa-arrow-left"></i>
                        </div>
                        <div class="detail-title">${title}</div>
                    </div>
                    <div class="detail-content">
                        <div class="detail-type ${type}">
                            ${getTypeName(type)}
                        </div>
                        <div class="detail-time">${time}</div>
                        <div class="detail-body">${content}</div>
                    </div>
                    <div class="detail-actions">
                `;
                
                // 根据消息类型添加不同操作按钮
                if (type === 'system') {
                    detailHTML += `
                        <div class="detail-action primary" id="systemAction">
                            <i class="fas fa-calendar-check"></i> 查看维护计划
                        </div>
                        <div class="detail-action secondary" id="remindAction">
                            <i class="fas fa-bell"></i> 设置提醒
                        </div>
                    `;
                } else if (type === 'prize') {
                    detailHTML += `
                        <div class="detail-action primary" id="addressAction">
                            <i class="fas fa-map-marker-alt"></i> 填写收货地址
                        </div>
                        <div class="detail-action secondary" id="shareAction">
                            <i class="fas fa-share-alt"></i> 分享喜讯
                        </div>
                    `;
                } else if (type === 'reply') {
                    detailHTML += `
                        <div class="detail-action primary" id="viewReplyAction">
                            <i class="fas fa-book-open"></i> 查看完整回复
                        </div>
                        <div class="detail-action secondary" id="askMoreAction">
                            <i class="fas fa-question-circle"></i> 继续追问
                        </div>
                    `;
                } else if (type === 'points') {
                    detailHTML += `
                        <div class="detail-action primary" id="pointsHistoryAction">
                            <i class="fas fa-history"></i> 查看积分历史
                        </div>
                        <div class="detail-action secondary" id="earnMoreAction">
                            <i class="fas fa-coins"></i> 赚取更多积分
                        </div>
                    `;
                }
                
                detailHTML += `</div>`;
                
                detailContainer.innerHTML = detailHTML;
                detailContainer.classList.add('active');
                
                // 返回按钮事件
                document.getElementById('detailBack').addEventListener('click', function() {
                    detailContainer.classList.remove('active');
                });
                
                // 标记为已读
                markMessageAsRead(card);
            }
            
            // 获取类型名称
            function getTypeName(type) {
                const typeNames = {
                    'system': '系统通知',
                    'reply': '回复消息',
                    'prize': '获奖通知',
                    'points': '积分变动'
                };
                return typeNames[type] || '消息';
            }
            
            // 消息卡片点击事件
            document.querySelectorAll('.message-card').forEach(card => {
                card.addEventListener('click', function(e) {
                    // 排除操作按钮的点击
                    if (!e.target.classList.contains('message-action')) {
                        showMessageDetail(card);
                    }
                });
            });
            
            // 消息操作按钮事件
            document.querySelectorAll('.message-action').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const card = this.closest('.message-card');
                    const actionType = this.classList.contains('action-mark-read') ? 'mark-read' : 
                                      this.classList.contains('action-view') ? 'view' : 
                                      this.classList.contains('action-address') ? 'address' : 'other';
                    
                    if (actionType === 'mark-read') {
                        markMessageAsRead(card);
                    } else if (actionType === 'view') {
                        showMessageDetail(card);
                    } else if (actionType === 'address') {
                        showAddressForm(card);
                    }
                });
            });
            
            // 显示地址表单
            function showAddressForm(card) {
                const detailContainer = document.getElementById('detailContainer');
                
                detailContainer.innerHTML = `
                    <div class="detail-header">
                        <div class="detail-back" id="detailBack">
                            <i class="fas fa-arrow-left"></i>
                        </div>
                        <div class="detail-title">填写收货地址</div>
                    </div>
                    
                    <div class="detail-content">
                        <div class="detail-type prize">
                            获奖通知
                        </div>
                        <div class="detail-time">2023年10月12日 16:45</div>
                        <div class="detail-body">
                            请填写您的收货地址，我们将在7个工作日内寄出奖品。请确保信息准确无误。
                        </div>
                    </div>
                    
                    <div class="address-form">
                        <div class="form-group">
                            <label class="form-label">收货人姓名</label>
                            <input type="text" class="form-input" placeholder="请输入收货人姓名">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">联系电话</label>
                            <input type="tel" class="form-input" placeholder="请输入联系电话">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">所在地区</label>
                            <input type="text" class="form-input" placeholder="省/市/区">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">详细地址</label>
                            <input type="text" class="form-input" placeholder="街道、小区、门牌号等">
                        </div>
                        
                        <div class="form-group">
                            <label class="form-label">邮政编码</label>
                            <input type="text" class="form-input" placeholder="请输入邮政编码">
                        </div>
                    </div>
                    
                    <div class="detail-actions">
                        <div class="detail-action primary" id="submitAddress">
                            <i class="fas fa-paper-plane"></i> 提交地址
                        </div>
                        <div class="detail-action secondary" id="cancelAddress">
                            <i class="fas fa-times"></i> 取消
                        </div>
                    </div>
                `;
                
                detailContainer.classList.add('active');
                
                // 返回按钮事件
                document.getElementById('detailBack').addEventListener('click', function() {
                    detailContainer.classList.remove('active');
                });
                
                // 取消按钮事件
                document.getElementById('cancelAddress').addEventListener('click', function() {
                    detailContainer.classList.remove('active');
                });
                
                // 提交地址事件
                document.getElementById('submitAddress').addEventListener('click', function() {
                    showNotification('收货地址已提交成功！');
                    setTimeout(() => {
                        detailContainer.classList.remove('active');
                    }, 1500);
                });
            }
            
            // 模拟加载更多
            const loading = document.querySelector('.loading');
            let loadingVisible = true;
            
            window.addEventListener('scroll', function() {
                if (loadingVisible && window.innerHeight + window.scrollY >= document.body.offsetHeight - 100) {
                    // 模拟加载
                    loading.innerHTML = '<div class="loading-spinner"></div><div>加载中...</div>';
                    
                    setTimeout(() => {
                        // 模拟添加新消息
                        const messageList = document.querySelector('.message-list');
                        const newMessage = document.createElement('div');
                        newMessage.className = 'message-card system fade-in';
                        newMessage.setAttribute('data-id', '6');
                        newMessage.setAttribute('data-type', 'system');
                        newMessage.innerHTML = `
                            <div class="message-header">
                                <div class="message-icon system">
                                    <i class="fas fa-bell"></i>
                                </div>
                                <div>
                                    <div class="message-title">新功能上线</div>
                                    <div class="message-time">2023年10月3日 10:00</div>
                                </div>
                            </div>
                            <div class="message-content">
                                答题挑战新增"知识闯关"模式，包含10个难度等级，完成挑战可获得限定徽章和积分奖励！
                            </div>
                            <div class="message-footer">
                                <div class="message-status unread">
                                    <i class="fas fa-circle"></i>
                                    未读
                                </div>
                                <div class="message-actions">
                                    <button class="message-action action-mark-read">标记已读</button>
                                    <button class="message-action action-view">立即体验</button>
                                </div>
                            </div>
                        `;
                        
                        messageList.appendChild(newMessage);
                        
                        // 重新绑定事件
                        newMessage.addEventListener('click', function(e) {
                            if (!e.target.classList.contains('message-action')) {
                                showMessageDetail(newMessage);
                            }
                        });
                        
                        newMessage.querySelectorAll('.message-action').forEach(button => {
                            button.addEventListener('click', function(e) {
                                e.stopPropagation();
                                const card = this.closest('.message-card');
                                
                                if (this.classList.contains('action-mark-read')) {
                                    markMessageAsRead(card);
                                } else if (this.classList.contains('action-view')) {
                                    showMessageDetail(card);
                                }
                            });
                        });
                        
                        // 恢复加载状态
                        loading.innerHTML = '<div class="loading-spinner"></div><div>加载更多消息...</div>';
                    }, 1500);
                }
            });
        });
    </script>
</body>
</html>